import 'package:flutter/material.dart';

class CustomAnimatedBottomBar extends StatelessWidget {
  final int selectedIndex;
  final double iconSize;
  final Color? backgroundColor;
  final bool showElevation;
  final Duration animationDuration;
  final List<MyBottomNaviationBarItem> items;
  final ValueChanged<int> onTiemSelected;
  final MainAxisAlignment mainAxisAlignnment;
  final double itemCornerRadius;
  final double containerHeight;
  final Curve curve;

  const CustomAnimatedBottomBar(
      {Key? key,
      this.selectedIndex = 0,
      this.showElevation = false,
      this.iconSize = 24,
      this.backgroundColor,
      this.itemCornerRadius = 24,
      this.containerHeight = 48,
      this.animationDuration = const Duration(milliseconds: 200), //表示持续时间
      this.mainAxisAlignnment = MainAxisAlignment.spaceAround,
      required this.items,
      required this.onTiemSelected,
      this.curve = Curves.easeInOut}) //加速度变化
      : assert(items.length >= 2 && items.length <= 5), //断言
        super(key: key);

  @override
  Widget build(BuildContext context) {
    final bgColor = backgroundColor ?? Theme.of(context).bottomAppBarColor;
    //处理适配
    return SafeArea(
        child: Container(
      width: double.infinity,
      height: containerHeight,
      padding: EdgeInsets.symmetric(vertical: 16),
      decoration: BoxDecoration(color: bgColor, boxShadow: [
        if (showElevation)
          const BoxShadow(
              color: Color.fromRGBO(233, 233, 233, 0.5),
              blurRadius: 20,
              spreadRadius: 1.0,
              offset: Offset(0, -2))
      ]),
      child: Row(
        mainAxisAlignment: mainAxisAlignnment,
        children: List.generate(
          items.length,
          (int index) => GestureDetector(
            onTap: () {
              onTiemSelected(index);
            },
            child: _ItemWidget(
                item: items[index],
                isSelected: (index == selectedIndex),
                backgroundColor: bgColor,
                animationDuration: animationDuration,
                itemCornerRadius: itemCornerRadius,
                iconSize: iconSize),
          ),
        ),
      ),
    ));
  }
}

class _ItemWidget extends StatelessWidget {
  final double iconSize;
  final bool isSelected;
  final MyBottomNaviationBarItem item;
  final Color backgroundColor;
  final double itemCornerRadius;
  final Duration animationDuration;
  final Curve curve;
  const _ItemWidget({
    Key? key,
    required this.item,
    required this.isSelected,
    required this.backgroundColor,
    required this.animationDuration,
    required this.itemCornerRadius,
    required this.iconSize,
    this.curve = Curves.easeOut,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Semantics(
      container: true,
      selected: isSelected,
      child: AnimatedContainer(
        //动画组件
        duration: animationDuration,
        curve: curve,
        decoration: BoxDecoration(
            color: backgroundColor,
            borderRadius: BorderRadius.circular(itemCornerRadius)),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          physics: NeverScrollableScrollPhysics(),
          child: Container(
            // color: Colors.red,
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                isSelected ? item.activeIcon : item.inactiveIcon,
                if (item.showText)
                  Container(
                    // padding: EdgeInsets.symmetric(horizontal: 10),
                    child: DefaultTextStyle.merge(
                      style: TextStyle(
                        color:
                            isSelected ? item.activeColor : item.inactiveColor,
                        fontWeight: FontWeight.bold,
                      ),
                      maxLines: 1,
                      textAlign: item.textAlign,
                      child: item.title,
                    ),
                  )
              ],
            ),
          ),
        ),
      ),
    ); //语意描述
  }
}

//接口
class MyBottomNaviationBarItem {
  late final Widget activeIcon;
  late final bool showText;
  late final Widget inactiveIcon;
  late final Widget title;
  late final Color? activeColor;
  late final Color? inactiveColor;
  late final TextAlign? textAlign;
  MyBottomNaviationBarItem(
      {required this.activeIcon,
      required this.inactiveIcon,
      required this.title,
      this.activeColor = Colors.blue,
      this.inactiveColor,
      this.textAlign,
      this.showText = true});
}
